<template>
    <view class="modular">
        <view class="modular-top">选择模板</view>
        <view class="modular-main">
            <view class="modular-item" @touchend="touchEnd1" :class="type == 1 ? 'on' : ''">
                <image v-if="imgUrl()" :src="imgUrl() + 'modular1.png'" mode=""></image>
                <view>模板标题1</view>
            </view>
            <view class="modular-item" @touchend="touchEnd2" :class="type == 2 ? 'on' : ''">
                <image v-if="imgUrl()" :src="imgUrl() + 'modular2.png'" mode=""></image>
                <view>模板标题2</view>
            </view>
        </view>

        <view class="footer">
            <view class="footer-item" @click="gomake">开始制作</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            type: 1,
            touchNum: 0,
        };
    },
    methods: {
        imgUrl() {
            return this.request.appImageBaseUrl;
        },
        godetail(e) {
            this.type = e;
            if (e == 1) {
                this.helper.navigateTo('./modulardetail');
            } else if (e == 2) {
                this.helper.navigateTo('./modulardetail1');
            }
        },
        gomake() {
            uni.redirectTo({
                url: '/packageHome/pages/story/makeStory?type=' + this.type,
            });
        },
        touchEnd1(e) {
            this.touchNum++;
            setTimeout(() => {
                if (this.touchNum == 1) {
                    this.type = 1;
                }
                if (this.touchNum == 2) {
                    this.helper.navigateTo('./modulardetail');
                }
                this.touchNum = 0;
            }, 250);
        },
        touchEnd2(e) {
            this.touchNum++;
            setTimeout(() => {
                if (this.touchNum == 1) {
                    this.type = 2;
                }
                if (this.touchNum == 2) {
                    this.helper.navigateTo('./modulardetail1');
                }
                this.touchNum = 0;
            }, 250);
        },
    },
};
</script>

<style scoped>
.footer {
    bottom: env(safe-area-inset-bottom);
}
</style>
